<div>
    <h2 data-translate="gateway.title">Gateway</h2>

    <h3 data-translate="gateway.routes.title">Current routes</h3>
    <p>
        <button type="button" class="btn btn-primary" ng-click="vm.refresh()" ng-show="vm.updatingRoutes == false">
            <span class="glyphicon glyphicon-refresh glyphicon-"></span>&nbsp;<span data-translate="gateway.refresh.button">Refresh</span>
        </button>
        <button type="button" class="btn btn-danger" ng-show="vm.updatingRoutes">
            <span class="glyphicon glyphicon-refresh"></span>&nbsp;<span data-translate="gateway.refresh.button">Refresh</span>
        </button>
    </p>
    <table class="table table-striped table-responsive">
        <thead>
        <tr>
            <th data-translate="gateway.routes.url">URL</th>
            <th data-translate="gateway.routes.service">Service</th>
            <th data-translate="gateway.routes.servers">Available servers</th>
        </tr>
        </thead>

        <tr ng-repeat="route in vm.gatewayRoutes">
            <td>{{route.path}}</td>
            <td>{{route.serviceId}}</td>
            <td>
                <div ng-show="{{route.serviceInstances.length == 0}}" class="label label-danger" data-translate="gateway.routes.error">
                    Warning: no server available!
                </div>
                <table class="table table-responsive">
                    <tr ng-repeat="instance in route.serviceInstances">
                        <td>{{instance.host}}:{{instance.port}}</td>
                        <td ng-show="{{instance.instanceInfo.status == 'UP'}}"><div class="label label-success">{{instance.instanceInfo.status}}</div></td>
                        <td ng-hide="{{instance.instanceInfo.status == 'UP'}}"><div class="label label-danger">{{instance.instanceInfo.status}}</div></td>
                    </tr>
                </table>
            </td>
        </tr>
    </table>
</div>
